<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优惠劵管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="alternate icon" type="image/png" href="../assets/i/favicon.png">
    <link rel="stylesheet" href="../base-component/amazeui/css/amazeui.min.css"/>
    <link rel="stylesheet" href="../base-component/cropper/cropper.min.css"/>
    <link rel="stylesheet" href="../base-component/layui/css/layui.css"/>
    <style>
        .am-edit-width-min {
            min-width: 160px;
            width: 160px;
            max-width: 160px; 
        }
        .am-tab-width-min {
        	min-width: 80px;
        	/* width: 120px;
        	max-width: 80px; */
        }
        h4 {
        	font-weight: bold;
        }
        .am-datepicker{
            z-index: 29991019;
        }
        #sys-product-update-model .am-checkbox-inline{
            margin-left: 0;
        }
    </style>
</head>
<body style="overflow-y: auto">
<div class="am-cf am-padding">
    <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">优惠劵管理</strong>
    </div>
</div>
<div class="am-panel am-panel-success">
    <div class="am-panel-hd">
        <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#sys-goods-list'}">
            优惠劵列表<span class="am-icon-chevron-down am-fr" ></span>
        </h4>
    </div>
    <div id="sys-goods-list" class="am-panel-collapse am-collapse am-in">
        <div class="am-panel-bd">
            <div class="am-g">
                <div class="am-u-sm-12 am-scrollable-horizontal">
                    <table class="am-table am-table-striped am-table-hover am-text-sm">
                        <thead>
                        <tr class="am-table">
                            <th class="am-text-truncate">优惠劵/名称</th>
                            <th class="am-text-truncate">主题名称</th>
                            <th class="am-text-truncate">起止时间</th>
                            <th class="am-text-truncate">使用金额</th>
                            <th class="am-text-truncate">抵扣金额</th>
                            <th class="am-text-truncate">状态</th>
                            <th class="am-text-truncate">分类</th>
                            <th class="am-text-truncate am-edit-width-min"><button class="am-btn am-btn-danger am-btn-xs" id="couponAdd">新增</button></th>
                        </tr>
                        </thead>
                        <tbody id="system-coupon-list-body">
                        </tbody>
                    </table>
                    <div id="system-coupon-page" class="am-fr"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 修改模态窗口 -->
<div class="am-modal-dialog" id="sys-product-update-model" style="display: none;">
	<div class="am-u-sm-12">
		<form class="am-form" id="sys-product-form-update" data-am-validator>
	        <fieldset>
                <div class="am-form-group">
                    <label for="name">优惠劵/名称</label>
                    <input class="" type="text" class="" id="name" placeholder="请输入优惠劵/名称..."  required="required">
                    <span class="am-form-caret"></span>
                </div>
                <div class="am-form-group">
                    <label for="prefix">主题名称</label>
                    <input class="" type="text" class="" id="prefix" placeholder="请输入主题名称..." required="required">
                    <span class="am-form-caret"></span>
                </div>
	            <div class="am-form-group">
                    <div class="am-alert am-alert-danger" id="my-alert" style="display: none">
                        <p>开始日期应小于结束日期！</p>
                    </div>
                    <div class="am-g">
                        <div class="am-u-sm-6">
                            <button type="button" class="am-btn am-btn-default am-margin-right" id="my-start">开始日期</button><span id="beginDate"></span>
                        </div>
                        <div class="am-u-sm-6">
                            <button type="button" class="am-btn am-btn-default am-margin-right" id="my-end">结束日期</button><span id="endDate"></span>
                        </div>
                    </div>
	            </div>
	            <div class="am-form-group">
	                <label for="minimumPrice">使用金额</label>
	                <input  type="number" class="isPositive" id="minimumPrice" placeholder="请输入使用金额..." onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" required="required">
	                <span class="am-form-caret"></span>
	            </div>
                <div class="am-form-group">
                    <label for="priceExpression">抵扣金额</label>
                    <input type="number" class="isPositive" id="priceExpression" placeholder="请输入抵扣金额..." onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" required="required">
                    <span class="am-form-caret"></span>
                </div>
                <div class="am-form-group">
                    <label for="isEnabled">是否启用</label>
                    <select id="isEnabled">
                        <option value="0">未启用</option>
                        <option value="1">已启用</option>
                    </select>
                    <span class="am-form-caret"></span>
                </div>
                <div class="am-form-group">
                    <label for="orders">优惠劵分类</label>
                    <select id="orders">
                        <option value="1">新用户优惠劵</option>
                        <option value="2">促销活动优惠劵</option>
                    </select>
                    <span class="am-form-caret"></span>
                </div>
                <div class="am-form-group">
                    <label>会员等级</label>
                    <div id="selectMemberRanks">

                    </div>
                    <span class="am-form-caret"></span>
                </div>
                <div class="am-form-group">
                    <label>商品类型</label>
                    <div id="selectProductCategorys">

                    </div>
                    <span class="am-form-caret"></span>
                </div>

                <div class="am-form-group am-form-group-sm am-margin-top am-padding-top">
                    <button type="button" class="am-btn am-btn-primary am-fl" id="save">保存</button>
                </div>
	        </fieldset>
	    </form>
    </div>
</div>

<!--listmodel-->
<script id="sysProductListTpl" type="text/html">
    {{#  layui.each(d.msg, function(index, item){ }}
    <tr>
        <td class="am-text-truncate am-tab-width-min">{{ item.name }}</td>
        <td class="am-text-truncate am-tab-width-min">{{ item.prefix }}</td>
        <td class="am-text-truncate am-tab-width-min">{{ item.beginDate }} 至 {{ item.endDate }}</td>
        <td class="am-text-truncate am-tab-width-min">{{ item.minimumPrice }}</td>
		<td class="am-text-truncate am-tab-width-min">{{ item.priceExpression }}</td>
        {{# if(item.isEnabled === true){ }}
        <td class="am-text-truncate am-tab-width-min">已启用</td>
        {{# } }}
        {{# if(item.isEnabled === false){ }}
        <td class="am-text-truncate am-tab-width-min">未启用</td>
        {{# } }}
        {{# if(item.orders === 1){ }}
        <td class="am-text-truncate am-tab-width-min">新用户优惠劵</td>
        {{# } }}
        {{# if(item.orders === 2){ }}
        <td class="am-text-truncate am-tab-width-min">促销活动优惠劵</td>
        {{# } }}
        <td class="am-text-truncate am-edit-width-min">
            <div class="am-btn-group am-btn-group-xs">
                <input type="button" class="am-btn am-btn-success btn-order-list-detail btn-system-coupon-update"  couponId="{{ item.id }}" value="编辑">
            </div>
        </td>
    </tr>
    {{#  }); }}
</script>
<script src="../base-component/jquery/jquery.min.js"></script>
<script src="../base-component/amazeui/js/amazeui.min.js"></script>
<script src="../assets/js/api.js"></script>
<script src="../base-component/layer/layer.js"></script>
<script src="../base-component/layui/layui.js"></script>
<script src="../base-component/cropper/cropper.min.js"></script>
<script src="../assets/js/system-coupon.js"></script>
</body>
</html>